// sass index.scss index.css --style compressed

@function rem($value) {
  @return ($value / 2) / 14 * 1rem;
}

html {
  font-size: 14 / 375 * 100vw;
}

body {
  margin: 0;
}

.download-logo {
  margin-top: rem(100);
  text-align: center;
  margin-bottom: rem(16);
  img {
    width: rem(143);
    height: rem(143);
  }
}

.download-title {
  font-size: rem(32);
  text-align: center;
  margin-bottom: rem(100);
}

.download-bt-android,
.download-bt-ios {
  width: rem(500);
  height: rem(90);
  border-radius: 5px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 0 auto;
  img {
    width: rem(45);
    height: rem(52);
    margin-right: rem(10);
  }
}

button[disabled] {
  background-color: #666666;
}

.download-bt-android {
  background-color: #02d6dc;
  margin-bottom: rem(40);
  &:active {
    background-color: #05babf;
  }
}

.download-bt-ios {
  margin-bottom: rem(56);
}

.download-qrcode {
  width: rem(235);
  height: rem(235);
  margin: 0 auto rem(20);
  img, canvas {
    width: rem(235);
    height: rem(235);
  }
}

.download-tips {
  font-size: rem(24);
  margin-bottom: rem(73);
  text-align: center;
}

.download-description {
  font-size: rem(24);
  padding-left: rem(40);
  padding-right: rem(40);
}

.mask {
  background: rgba(0, 0, 0, 0.6);
  display: none;
  // display: block;
  img {
    width: rem(585);
    height: rem(167);
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.38s linear;
  }
}

.mask-transparent {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
